import React from 'react';
import { Card } from 'antd';
import { motion } from 'framer-motion';

// 法律卡片组件，支持多种法律风格
const LegalCard = ({ 
  children, 
  title, 
  style = 'default',
  hoverable = true,
  ...props 
}) => {
  
  // 不同风格的卡片配置
  const cardStyles = {
    default: {
      outer: {
        borderRadius: '8px',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
        overflow: 'hidden',
        border: '1px solid #a67c00',
        backgroundColor: '#fff'
      },
      inner: {
        padding: '16px',
      },
      title: {
        fontFamily: '"Cinzel", "Noto Serif SC", serif',
        fontSize: '18px',
        color: '#1a2b48',
        marginBottom: '12px',
        borderBottom: '1px solid rgba(166, 124, 0, 0.3)',
        paddingBottom: '8px'
      },
      hover: {
        boxShadow: '0 8px 20px rgba(0, 0, 0, 0.15)',
        y: -5
      }
    },
    parchment: {
      outer: {
        borderRadius: '0px',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
        overflow: 'hidden',
        border: '1px solid #a67c00',
        background: 'linear-gradient(to bottom, #f8f0dd 0%, #e0d1ae 100%)',
        position: 'relative'
      },
      inner: {
        padding: '20px',
        backgroundImage: `repeating-linear-gradient(
          to bottom,
          transparent,
          transparent 28px,
          rgba(166, 124, 0, 0.1) 29px
        )`,
      },
      title: {
        fontFamily: '"Cinzel", "Noto Serif SC", serif',
        fontSize: '20px',
        color: '#8b0000',
        marginBottom: '15px',
        textAlign: 'center',
        textShadow: '0 1px 1px rgba(255, 255, 255, 0.5)',
        letterSpacing: '1px'
      },
      hover: {
        boxShadow: '0 12px 24px rgba(0, 0, 0, 0.2)',
        y: -5,
        rotate: -0.5
      }
    },
    scroll: {
      outer: {
        borderRadius: '10px 10px 0 0',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
        overflow: 'hidden',
        border: 'none',
        backgroundColor: '#f8f0dd',
        position: 'relative'
      },
      inner: {
        padding: '30px 20px 20px',
        backgroundImage: `linear-gradient(
          to bottom,
          rgba(166, 124, 0, 0.05) 0%,
          transparent 10%
        )`,
      },
      title: {
        fontFamily: '"Cinzel", "Noto Serif SC", serif',
        fontSize: '20px',
        color: '#1a2b48',
        marginBottom: '20px',
        textAlign: 'center',
        position: 'relative',
        letterSpacing: '1px',
        '&::after': {
          content: '""',
          position: 'absolute',
          bottom: '-10px',
          left: '10%',
          width: '80%',
          height: '1px',
          background: 'linear-gradient(to right, transparent, #a67c00, transparent)'
        }
      },
      hover: {
        boxShadow: '0 16px 30px rgba(0, 0, 0, 0.2)',
        y: -8
      },
      before: {
        content: '""',
        position: 'absolute',
        top: '0',
        left: '0',
        right: '0',
        height: '10px',
        backgroundColor: '#a67c00',
        borderRadius: '10px 10px 0 0'
      },
      after: {
        content: '""',
        position: 'absolute',
        bottom: '-10px',
        left: '10%',
        right: '10%',
        height: '20px',
        backgroundColor: '#e0d1ae',
        borderRadius: '0 0 50% 50%',
        boxShadow: '0 5px 5px -5px rgba(0, 0, 0, 0.3)'
      }
    },
    legal: {
      outer: {
        borderRadius: '0',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
        overflow: 'hidden',
        border: '2px solid #a67c00',
        backgroundColor: '#fff',
      },
      inner: {
        padding: '20px',
      },
      title: {
        fontFamily: '"Cinzel", "Noto Serif SC", serif',
        fontSize: '18px',
        color: '#1a2b48',
        marginBottom: '15px',
        borderBottom: '2px solid #1a2b48',
        paddingBottom: '10px',
        position: 'relative',
        paddingLeft: '30px',
        '&::before': {
          content: '"⚖️"',
          position: 'absolute',
          left: 0,
          top: '2px',
          fontSize: '20px'
        }
      },
      hover: {
        boxShadow: '0 8px 20px rgba(0, 0, 0, 0.2)',
        y: -3
      }
    },
    adventure: {
      outer: {
        borderRadius: '8px',
        boxShadow: '0 4px 15px rgba(0, 0, 0, 0.2)',
        overflow: 'hidden',
        border: '1px solid #5c8374',
        background: 'linear-gradient(135deg, #fff, #f5f5f5)',
      },
      inner: {
        padding: '16px',
        backgroundImage: `radial-gradient(
          circle at top right,
          rgba(92, 131, 116, 0.1),
          transparent 70%
        )`,
      },
      title: {
        fontFamily: '"Cinzel", "Noto Serif SC", serif',
        fontSize: '18px',
        color: '#5c8374',
        marginBottom: '12px',
        borderBottom: '1px dashed #5c8374',
        paddingBottom: '8px'
      },
      hover: {
        boxShadow: '0 15px 30px rgba(0, 0, 0, 0.3)',
        scale: 1.02
      }
    }
  };

  // 获取当前风格的卡片样式
  const currentStyle = cardStyles[style] || cardStyles.default;
  
  // 渲染特殊元素（如卷轴风格的边角）
  const renderSpecialElements = () => {
    if (style === 'scroll') {
      return (
        <>
          <div style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            height: '10px',
            backgroundColor: '#a67c00',
            borderRadius: '10px 10px 0 0'
          }} />
          <div style={{
            position: 'absolute',
            bottom: '-10px',
            left: '10%',
            right: '10%',
            height: '20px',
            backgroundColor: '#e0d1ae',
            borderRadius: '0 0 50% 50%',
            boxShadow: '0 5px 5px -5px rgba(0, 0, 0, 0.3)'
          }} />
        </>
      );
    }
    return null;
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      whileHover={hoverable ? currentStyle.hover : {}}
      style={{
        ...currentStyle.outer,
        position: 'relative'
      }}
      {...props}
    >
      {renderSpecialElements()}
      <div style={currentStyle.inner}>
        {title && (
          <div style={currentStyle.title}>
            {title}
          </div>
        )}
        {children}
      </div>
    </motion.div>
  );
};

export default LegalCard; 